<template>
	<!-- 子组件不需要UI，仅处理逻辑 -->
	<view></view>
</template>

<script setup>
	import {
		defineEmits,
	} from 'vue';
	// 导入共享的配置
	import {
		BASE_URL,
		CLIENT_ID,
		getToken
	} from '@/utils/request.js';

	// 接收父组件传递的后端上传接口路径（不包含基础URL）
	const props = defineProps({
		uploadUrl: {
			type: String,
			required: true,
			description: ''
		}
	});

	// 定义事件，向父组件传递结果
	const emit = defineEmits([
		'imageSelected', // 图片选择成功
		'uploadSuccess', // 上传成功
		'uploadFailed', // 上传失败
		'error' // 其他错误
	]);

	// 供父组件调用的方法，打开图片选择器
	const openImageSelector = async () => {
		try {
			// 调用uni.chooseMedia API选择图片
			const res = await uni.chooseMedia({
				count: 1, // 最多选择1张图片
				mediaType: ['image'], // 只选择图片
				sourceType: ['album', 'camera'], // 可从相册选择或拍摄
				sizeType: ['original', 'compressed'], // 可选择原图或压缩图
				camera: 'back' // 默认使用后置摄像头
			});

			// 处理返回结果
			if (res.tempFiles && res.tempFiles.length > 0) {
				const tempFile = res.tempFiles[0];
				const imagePath = tempFile.tempFilePath;

				// 通知父组件图片已选择
				emit('imageSelected', imagePath);

				// 自动上传到后端
				await uploadToServer(imagePath);
			}
		} catch (err) {
			console.error('选择图片失败:', err);
			emit('error', err);
			// 忽略用户取消操作的错误
			if (err.errMsg !== 'chooseMedia:fail cancel') {
				uni.showToast({
					title: '选择图片失败',
					icon: 'none'
				});
			}
		}
	};

	// 上传图片到后端服务器
	const uploadToServer = async (tempFilePath) => {
		// 使用共享方法获取token
		const token = getToken();

		// 构建请求头，使用共享的CLIENT_ID
		const header = {
			'content-type': 'multipart/form-data', // 上传文件需用此类型
			...(token ? {
				authorization: 'Bearer ' + token
			} : {}),
			clientId: CLIENT_ID, // 使用共享的clientId
		};

		try {
			// 显示加载中提示
			uni.showLoading({
				title: '上传中...',
				mask: true
			});

			// 调用uni.uploadFile上传图片，使用共享的BASE_URL
			const uploadRes = await uni.uploadFile({
				url: BASE_URL + props.uploadUrl, // 拼接完整URL
				filePath: tempFilePath,
				name: 'file', // 后端接收文件的字段名
				header: header,
			});

			// 隐藏加载提示
			uni.hideLoading();

			// 处理上传结果，与request封装的错误处理保持一致
			if (uploadRes.statusCode >= 200 && uploadRes.statusCode < 300) {
				try {
					// 解析后端返回的JSON数据
					const result = JSON.parse(uploadRes.data);
					if (result.code == 200) {
						emit('uploadSuccess', result);
						// 显示上传成功提示
						uni.showToast({
							title: '上传成功',
							icon: 'success'
						});
					} else {
						//上传失败
						emit('uploadFailed', result);
						uni.showToast({
							title: '上传失败',
							icon: 'error'
						});
					}


				} catch (e) {
					// 处理JSON解析错误
					const error = new Error('上传成功但返回数据格式错误');
					emit('uploadFailed', error);
					uni.showToast({
						title: '上传结果解析失败',
						icon: 'none'
					});
				}
			} else {
				// 处理HTTP错误状态码，与request封装保持一致
				uni.showToast({
					title: '稍后再试~',
					icon: 'none'
				});
				const error = new Error(`上传失败，状态码: ${uploadRes.statusCode}`);
				emit('uploadFailed', error);
			}
		} catch (err) {
			// 处理上传过程中的异常，与request封装保持一致
			uni.hideLoading();
			console.error('上传图片异常:', err);
			emit('uploadFailed', err);
			uni.showToast({
				title: '网络异常',
				icon: 'none'
			});
		}
	};

	// 暴露方法给父组件调用
	defineExpose({
		openImageSelector
	});
</script>

<style scoped>
	/* 子组件无UI，无需样式 */
</style>